@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *::after, *::before {
	@include box-sizing(border-box);
}

*::after, *::before {
	content: '';
}

body {
	font: {
		size: 100%;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: lighten($color-1, 30%);
	background-color: $color-1;
}

a {
	color: $color-2;
	text-decoration: none;
}

img {
	max-width: 100%;
}

h1, h2 {
	color: $color-3;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.btn {
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	@include font-size(12px);
	color: $color-3;
	background-color: lighten($color-1, 20%);
	box-shadow: 0 1px 6px rgba(#000, .1), inset 0 1px 0 rgba(#FFF, .2);
	@include transition(background-color .2s);

	.no-touch &:hover {
		background-color: lighten($color-1, 25%);
	}

	&.salmon {
		background-color: $color-2;
	}

	.no-touch &.salmon:hover {
		background-color: lighten($color-2, 5%);
	}

	@include MQ(L) {
		@include font-size(14px);
		letter-spacing: 2px;
	}
}

/* -------------------------------- 

Main components 

-------------------------------- */

html, body {
	/* important for .cd-main-content 100% height to work */
	height: 100%;
}

.cd-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: $header-height-S;
	@include clearfix;
	background-color: darken($color-1, 10%);
	overflow: hidden;

	/* Force Hardware Acceleration in WebKit */
	@include transform(translateZ(0));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	@include transform(translateY(-100%));
	@include transition(transform .3s);

	#cd-logo {
		float: left;
		margin: 18px 0 0 5%;

		img {
			display: block;
			width: 60px;
			height: 18px;
		}
	}

	#cd-action {
		display: inline-block;
		float: right;
		margin: 10px 5% 0 0;
	}

	.btn {
		height: 30px;
		line-height: 30px;
		padding: 0 2em;
	}

	&.slide-down {
		@include transform(translateY(0));
	}

	@include MQ(L) {
		height: $header-height-L;
		background-color: transparent;

		#cd-logo {
			margin-top: 32px;
			@include font-size(28px);

			img {
				width: 80px;
				height: 25px;
			}
		}

		#cd-action {
			margin: 20px 5% 0 0;
		}


		.btn {
			height: 50px;
			line-height: 50px;
		}
	}
}

.cd-main-content {
	overflow: hidden;
	max-width: $XL;
	margin: 0 auto;

	@include MQ(L) {
		position: relative;
		height: 100%;
		min-height: 500px;
		padding: 0 10%;
	}
}

.cd-product-intro {
	padding: 50px 5%;
	text-align: center;

	h1 {
		margin-bottom: 10px;
		font-weight: 100;
		@include font-size(25px);
		font-weight: 700;
		line-height: 1.2;
	}

	p {
		padding: 0 0 20px;
		@include font-size(14px);
		line-height: 1.8;
		max-width: 560px;
		margin: 0 auto;
	}

	.cd-triggers {
		@include clearfix;
	}

	.btn {
		width: 120px;
		height: 40px;
		line-height: 40px;
		margin-right: 8px;
	}

	@include MQ(S) {
		padding: 50px 10%;
	}

	@include MQ(M) {
		padding: 50px 15%;
	}

	@include MQ(L) {
		/* Force Hardware Acceleration in WebKit */
		@include transform(translateZ(0));
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		position: absolute;
		top: 50%;
		@include transform(translateY(-50%));
		left: 10%;
		width: 50%;

		padding: 0;
		text-align: left;

		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		-moz-transition: -moz-transform 0.3s 0s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;

		.is-product-tour & {
			opacity: 0;
			@include transform(translateY(-50%) translateX(-50%));
		}

		h1 {
			@include font-size(50px);
		}

		p {
			@include font-size(16px);
			padding: 10px 0 44px;
			margin: 0;
		}

		.btn {
			margin-right: 15px;
			width: 190px;
			height: 60px;
			line-height: 60px;
		}
	}
}

#cd-product-tour {
	position: relative;

	@include MQ(L) {
		width: 100%;
		max-width: $M;
		margin: 0 auto;
		height: 500px;
		top: 50%;
		left: 0;
		@include transform(translateZ(0));
		@include transform(translateY(-50%) translateX(75%));
		@include transition(transform .3s);

		.is-product-tour & {
			@include transform(translateY(-50%) translateX(0));
		}

		> ul {
			height: 100%;
			width: 100%;
		}
	}
}

.cd-single-item {
	/* product tour - single list item */
	padding: 50px 5% 120px;
	width: 100%;
	text-align: center;
	border-top: 1px solid lighten($color-1, 5%);

	h2 {
		margin-bottom: 15px;
		@include font-size(22px);
	} 

	p {
		padding: 10px 0 50px;
		@include font-size(14px);
		line-height: 1.6;
	}

	@include MQ(S) {
		padding: 50px 10% 120px;
	}

	@include MQ(M) {
		padding: 50px 15% 120px;

		@include clearfix;

		.cd-caption {
			@include column(.5);
			margin-top: 180px;
		}

		&:nth-child(2n) .cd-caption {
			float: right;
		}
	}

	@include MQ(L) {
		position: absolute;
		top: 50%;
		@include transform(translateY(-50%));
		left: 0;
		text-align: left;
		border-top: none;
		padding: 0;
		visibility: visible;

		&.cd-not-visible {
			/*need to create a specific class to change visibility value due to a Firefox bug*/
			/*CSS transition/animation fails when parent element changes visibility attribute*/
			visibility: hidden;
		}

		h2 {
			@include font-size(48px);
			font-weight: 300;
		}

		p {
			@include font-size(16px);
			line-height: 1.5;
			max-width: 600px;
		}

		.cd-caption {
			@include column(.6, right);
			margin: 80px 0 0 5%;
			opacity: 0;
			@include transform(translateZ(0));
			-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
			-moz-transition: -moz-transform 0.3s 0s, opacity 0.3s;
			transition: transform 0.3s, opacity 0.3s;
		}

		.is-product-tour &.cd-active .cd-caption {
			opacity: 1;
		}

		&.cd-move-right .cd-caption { 
			@include transform(translateX(100px));
		}
	}
}

.cd-image-container {
	/*wrapper for image (and video - desktop only)*/ 
	max-width: 226px;
	margin: 0 auto;
	padding-top: 50px;

	> div {
		position: relative;
	}

	img {
		display: block;
	}

	video {
		display: none;
	}

	@include MQ(M) {
		float: right;

		.cd-single-item:nth-child(2n) & {
			float: left;
		}
	}

	@include MQ(L) {
		height: 402px;
		@include column(.35);
		max-width: none;
		padding-top: 0;

		> div {
			display: inline-block;
			max-width: 100%;
			max-height: 100%;
		}

		img { 
			height: 402px;
			@include transition(transform .3s);
			@include transform(translateZ(0));
		}

		video {
			/*not inserted in html - will be loaded through jQuery*/
			display: block;
			position: absolute;
			width: 402px;
			left: 50%;
		    top: 50%;
		    bottom: auto;
		    right: auto;
		    z-index: 1;
			@include transition(transform .3s);
			@include transform(translateZ(0));
			@include transform(translateX(-50%) translateY(-50%) rotate(-90deg));
		}

		.cd-move-right & img {
			@include transform(translateX(100%));
		}

		.cd-move-right & video {
			@include transform(translateX(50%) translateY(-50%) rotate(-90deg));
		}
	}
}


.cd-phone-frame {
	/* Phone in CSS */
	@include box-sizing(content-box);
	position: absolute;
	top: -45px;
	left: -10px;
	width: 100%;
	height: 100%;
	border-color: darken($color-1, 8%);
	border-style: solid;
	border-width: 45px 10px;
	border-radius: 2.5em;
	@include backface-visibility(hidden);
	
	&::after, &::before {
		/*these are the iPhone circle elements*/
		position: absolute;
		@include center(x); // see mixin inside partials > _mixins.scss
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		background-color: darken($color-1, 15%);
		border-radius: 50%;
	}

	&::before {
		height: 11px;
		width: 11px;
		top: -28px;
	}

	&::after {
		height: 31px;
		width: 31px;
		bottom: -38px;
	}
}

.cd-image-wrapper {
	position: relative;
	overflow: hidden;
	z-index: 2;
}

.cd-slider-nav {
	/* product discover slider navigation */
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 80px;
	@include clearfix;

	a {
		position: relative;
		display: block;
		height: 100%;
		@include column(.5); // see mixin inside partials > _layout.scss
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		color: transparent;
		background: darken($color-1, 5%);

		.no-touch &:hover {
			background: darken($color-1, 8%);
		}

		&::before {
			/*this is the bacgrounf arrow - we have been used a before element to change the opacity on hover*/
			position: absolute;
			@include center;
			width: 24px;
			height: 16px;
			opacity: .2;
			background: url(../img/cd-arrow.svg) no-repeat center center;
			@include backface-visibility(hidden);
			@include transition(opacity .2s);
		}

		.no-touch &:hover::before {
			opacity: 1;
		}
	}

	.cd-next {
		border-left: 1px solid $color-1; 
	}

	.cd-next::before {
		@include transform(translateX(-50%) translateY(-50%) rotate(180deg));
	}

	@include MQ(L) {
		display: block;
		
		a {
			visibility: hidden;
			opacity: 0;
			@include transition(opacity 0.3s 0s, visibility 0s 0.3s, background 0.2s);
		}

		.is-product-tour & a {
			visibility: visible;
			opacity: 1;
			@include transition(opacity 0.3s 0s, visibility 0s 0s, background 0.2s);

			&.cd-inactive {
				visibility: hidden;
				opacity: 0;
				@include transition(opacity 0.3s 0s, visibility 0s 0.3s, background 0.2s);
			}
		}
	}
}

.cd-loader {
	/*top loading bar*/
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background-color: $color-2;
	display: none;
}